<!DOCTYPE html>
<html lang="et">
    <head>
        <meta charset="utf-8" />

        <title>{{ site_name }}</title>

        <link rel="stylesheet" href="/css/screen.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        {% block head %}
        {% endblock %}

        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-260765-18']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

        </script>

    </head>
    <body>
        <header>
            <h1><a href="/">{{ system_title }}</a></h1>
            <nav id="top_nav">
                {% if user %}
                <i>{{ str.welcome }} <a href="/preferences">{{ user.displayname|default:"" }}</a>!</i>
                | 
                <select id="current_role" name="current_role">
                    {% for pr in user.roles2 %}
                    <option value="{{ pr.key }}"{% ifequal user.current_role pr.key %} selected{% endifequal %}>{{ pr.displayname }}</option>
                    {% endfor %}
                </select>                
                | <a href="{{ logouturl|escape }}">{{ str.logout }}</a>
                {% else %}
                <a href="{{ loginurl|escape }}" style="border:none;">{{ str.login }}</a>
                {% endif %}
            </nav>
        </header>

        {% block breadcrumb %}
        {% endblock %}

        <section id="page">

        {% block content %}
        {% endblock %}

        </section>

        <footer>
        </footer>
        
        <script>
        $(document).ready(function(){
            $('#current_role').change(function() {
                $.post('/person/set_role', {role: $(this).val()}, function(json) {
                    $(this).effect("highlight", {}, 1000);
                }, "json");
            });
        });
        </script>
    </body>
</html>